<template>
  <div class="component-live-add-or-update">
    <el-dialog
      v-model="visible"
      :title="$t('liveRoom.viewLRoomInfo')"
      :close-on-click-modal="false"
      style="min-width:950px"
    >
      <el-form
        ref="dataFormRef"
        :model="dataForm"
        label-width="120px"
        @submit.prevent
      >
        <el-form-item
          :label="$t('liveRoom.roomName')"
          prop="name"
        >
          <el-input
            v-model.trim="dataForm.name"
            disabled
            maxlength="17"
            show-word-limit
            style="width:534px"
          />
        </el-form-item>
        <el-form-item
          :label="$t('liveRoom.anchorName')"
          prop="nickName"
        >
          <el-input
            v-model.trim="dataForm.nickName"
            maxlength="15"
            disabled
            show-word-limit
            style="width:534px"
          />
        </el-form-item>
        <el-form-item
          :label="$t('liveRoom.anchorMobile')"
          prop="userMobile"
        >
          <el-input
            v-model="dataForm.userMobile"
            :maxlength="11"
            disabled
            style="width:534px"
          />
        </el-form-item>
        <el-form-item
          :label="$t('liveRoom.liveTime')"
          class="liveTime"
        >
          <div class="live-time-row">
            <el-form-item prop="startTime">
              <el-date-picker
                v-model="dataForm.startTime"
                disabled
                type="date"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
                style="width:144px"
              />
              <el-time-select
                v-model="startTimeValue"
                :picker-options="{
                  start: '00:00',
                  step: '00:30',
                  end: '23:30'
                }"
                style="width:106px"
                disabled
                :placeholder="$t('time.startTime')"
              />
            </el-form-item>
            <div class="tip">
              {{ $t("date.tip") }}
            </div>
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="dataForm.endTime"
                disabled
                type="date"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
                style="width:144px"
              />
              <el-time-select
                v-model="endTimeValue"
                :picker-options="{
                  start: '00:00',
                  step: '00:30',
                  end: '23:30'
                }"
                style="width:106px"
                disabled
                :placeholder="$t('time.endTime')"
              />
            </el-form-item>
            <br>
          </div>
        </el-form-item>
        <el-form-item
          :label="$t('liveRoom.liveBackgroundImage')"
          prop="coverImg"
        >
          <img-upload
            v-model="dataForm.coverImg"
            disabled
          />
        </el-form-item>
        <!-- <el-form-item
          :label="$t('liveRoom.anchorSharingPicture')"
          prop="shareImg"
        >
          <img-upload
            v-model="dataForm.shareImg"
            disabled
          />
        </el-form-item> -->
        <el-form-item
          :label="$t('liveRoom.liveCoverImage')"
          prop="feedsImg"
        >
          <img-upload
            v-model="dataForm.feedsImg"
            disabled
          />
        </el-form-item>
        <el-form-item
          :label="$t('liveRoom.prod') + ':'"
          required
        >
          <div class="prod-card">
            <div
              v-for="(liveProd, index) in liveRoomProdList"
              :key="index"
            >
              <el-card
                :body-style="{ padding: '0px' }"
                style="height: 160px; width: 120px; margin-bottom: 15px;margin-right: 10px;"
              >
                <prod-pic
                  height="104px"
                  width="100%"
                  :pic="liveProd.pic"
                />
                <div class="card-prod-bottom">
                  <span class="card-prod-name">{{ liveProd.prodName }}</span>
                </div>
              </el-card>
            </div>
            <div v-if="liveRoomProdList.length === 0">
              无
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div class="btn-box">
        <div
          class="default-btn"
          @click="back()"
        >
          {{ $t("crud.filter.cancelBtn") }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import moment from 'moment'
import { reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const emit = defineEmits(['refreshDataList'])
const Data = reactive({
  pickerOptions: {
    disabledDate (time) {
      const date = moment().add(0, 'days').startOf('days')
      return (
        time.getTime() >= date.valueOf()
      )
    }
  },
  liveRoomProdList: [],
  dataForm: {
    roomId: null,
    name: null,
    nickName: null,
    userMobile: null,
    coverImg: null,
    shareImg: null,
    feedsImg: null,
    liveStatus: null,
    startTime: null,
    endTime: null,
    prodIds: []
  },
  visible: false,
  startTimeValue: '',
  endTimeValue: '',
  isDisabledDate: false
})
const { pickerOptions, liveRoomProdList, dataForm, startTimeValue, endTimeValue, visible } = toRefs(Data)

const dataFormRef = ref()
const init = (data) => {
  if (data) {
    Data.dataForm = data
    Data.dataForm.roomId = data.roomId
  } else {
    Data.dataForm.liveStatus = 0
  }
  Data.visible = true
  Data.isSubmit = false
  Data.liveRoomProdList = []
  nextTick(() => {
    dataFormRef.value.resetFields()
    const datetimeRange = getDateTimeRange()
    Data.dataForm.startTime = datetimeRange.startTime
    Data.dataForm.endTime = datetimeRange.endTime
    Data.startTimeValue = datetimeRange.currentTime
    Data.endTimeValue = datetimeRange.currentTime
    if (Data.dataForm.roomId) {
      http({
        url: http.adornUrl('/live/liveRoom/info/' + Data.dataForm.roomId),
        method: 'get',
        params: http.adornParams()
      }).then(({ data }) => {
        Data.dataForm = JSON.parse(JSON.stringify(data))
        Data.tmepStartTime = data.startTime
        Data.startTimeValue = Data.dataForm.startTime ? Data.dataForm.startTime.substring(11, Data.dataForm.startTime.length - 3) : ''
        Data.endTimeValue = Data.dataForm.endTime ? Data.dataForm.endTime.substring(11, Data.dataForm.endTime.length - 3) : ''
        Data.dataForm.startTime = getParseTime(Data.dataForm.startTime, '{y}-{m}-{d}')
        Data.dataForm.endTime = getParseTime(Data.dataForm.endTime, '{y}-{m}-{d}')
        // 当前时间超出开始时间时，开始时间不可修改
        if (new Date() > Date.parse(data.startTime)) {
          Data.isDisabledDate = true
        } else {
          startTimeCountDown()
        }
      })
      // 获取商品列表
      http({
        url: http.adornUrl('/live/liveRoom/listLiveRoomProd'),
        method: 'get',
        params: http.adornParams({
          roomId: Data.dataForm.roomId
        })
      }).then(({ data }) => {
        Data.liveRoomProdList = data.map(x => x.product)
        if (Data.dataForm.status !== null && Data.dataForm.status === -1) {
          // 用户注销
          ElMessage($t('liveRoom.liveAnchorNotExist'))
        } else if (Data.dataForm.status !== null && Data.dataForm.status !== 1) {
          // 用户禁用
          ElMessageBox.confirm($t('liveRoom.liveAnchorError'))
        }
      })
    }
  })
}

// 直播开始时间倒计时
const startTimeCountDown = () => {
  if (new Date().getTime() < Date.parse(Data.tmepStartTime)) {
    Data.liveTimer = setTimeout(Data.startTimeCountDown, 1000)
  } else {
    Data.isDisabledDate = true
    Data.liveTimer && clearTimeout(Data.liveTimer)
  }
}
defineExpose({ init })
const back = () => {
  visible.value = false
  emit('refreshDataList')
}
</script>

<style lang="scss" scoped>
:deep(.el-form-item__content) {
  display: block;
}

.live-time-row {
  display: flex;

  .tip {
    margin: 0 10px;
  }
}

.liveTime :deep(.el-form-item__error) {
  top: 60px;
}

.liveTime :deep(.el-form-item__label:before) {
  content: '*';
  color: #F56C6C;
  margin-right: 4px;
}

.prod-card {
  display: flex;
  flex-wrap: wrap;
}
.component-live-add-or-update{
  .btn-box{
    display: flex;
    justify-content: flex-end;
  }
}
</style>
